<template>
  <div v-loading="loading" class="app-container">
    <dialog-video-player ref="videoPlayer" />
    <el-card v-for="(item, index) in inspections" :key="index" class="inspection-form">
      <template v-if="item.inspectionInfo" slot="header">
        <el-row style="margin: 0 auto; width: 90%">
          <el-col :span="6" class="inspection-item">
            <span class="inspection-item-label">
              批{{ '\xa0\xa0' }}次：<span class="inspection-item-value">第{{ item.inspectionInfo.cfcheckbatch }}批</span>
            </span>
          </el-col>
          <el-col :span="6" class="inspection-item">
            <span class="inspection-item-label">
              批次说明：<span class="inspection-item-value">{{ item.inspectionInfo.fdescription }}</span>
            </span>
          </el-col>
          <el-col :span="6" class="inspection-item">
            <span class="inspection-item-label">
              报验人员：<span class="inspection-item-value">{{ item.inspectionInfo.cfinspector }}</span>
            </span>
          </el-col>
          <el-col :span="5" class="inspection-item">
            <span class="inspection-item-label">
              报验时间：<span class="inspection-item-value">{{ item.inspectionInfo.cfinspecttime }}</span>
            </span>
          </el-col>
        </el-row>
        <el-row v-if="item.pictureIds && item.pictureIds.length > 0" class="inspection-item" style="margin: 10px auto 0; width: 90%">
          <el-col :span="24" style="display: flex;">
            <div class="inspection-item-label" style="flex: 0 0 70px">
              报验图片：
            </div>
            <div style="flex: 1; overflow-x: auto;">
              <div style="display: flex; align-items: center">
                <div v-for="url in getImgUrls(item.pictureIds)" :key="url" style="margin: 5px">
                  <el-image
                    class="image-size"
                    fit="contain"
                    :src="url"
                    :preview-src-list="getImgUrls(item.pictureIds)"
                  />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
      <el-table size="small" :data="item.records">
        <el-table-column type="expand" width="60" align="center">
          <template slot-scope="scope">
            <div class="process-check">
              <div v-for="(check, cindex) in scope.row.results" :key="'check' + cindex" class="check-item">
                <el-card class="check-condition">
                  <div slot="header" class="header">
                    <el-row type="flex" style="width: 100%">
                      <el-col :span="5"><span class="check-title">验收情况</span></el-col>
                      <el-col :span="5"><span><span class="label">验收人员：</span>{{ check.checkUserName }}</span></el-col>
                      <el-col :span="5"><span><span class="label">验收时间：</span>{{ check.checkDate }}</span></el-col>
                      <el-col :span="5"><span class="check-title"><span><span class="label">即改即验：</span><el-checkbox v-model="check.isCurrCorrected" disabled :true-label="1" :false-label="0" /></span></span></el-col>
                      <el-col :span="4"><span class="label">验收状态：<span :class="{'primary': check.checkResult === 10 || check.checkResult === 20, 'danger': check.checkResult === 11 || check.checkResult === 21}">{{ check.checkResult | checkResult }}</span></span></el-col>
                    </el-row>
                    <!--<el-button type="primary" size="mini" style="margin-top: -6px;" :loading="loadingImg" @click="printPreview(scope.row, check)">打印</el-button>-->
                  </div>
                  <el-row class="check-row" type="flex" align="middle">
                    <template v-if="check.checkResult === 11 || check.checkResult === 21">
                      <el-col :span="5">
                        <div class="deadline"><span>整改期限：</span>{{ check.reFormDate }}</div>
                      </el-col>
                      <el-col :span="5">
                        <div class="quality"><span>问题性质：</span><span>{{ check.problemProperty }}</span></div>
                      </el-col>
                    </template>
                    <el-col :span="12">
                      <span>情况描述：</span>
                      <span>{{ check.problemDesc }}</span>
                    </el-col>
                  </el-row>
                  <div v-if="check.attachment['_0']" class="attachment-row">
                    <div class="row-title">
                      <span class="label">符合要求：</span>
                    </div>
                    <el-row class="row-content" type="flex" :gutter="10" justify="start">
                      <el-col v-for="(attachment, index2) in check.attachment['_0']" :key="index2" class="content-item">
                        <template v-if="imageTypes.includes(attachment.type)">
                          <el-image class="item-image" fit="contain" :src="getFileRequestUrl(attachment.fileId)" :preview-src-list="[getFileRequestUrl(attachment.fileId)]" />
                          <span>{{ attachment.remark }}</span>
                        </template>
                        <template v-if="videoTypes.includes(attachment.type)">
                          <div class="video-wrapper" @click="playVideo(attachment)">
                            <i class="video-icon el-icon-video-camera" />
                          </div>
                        </template>
                      </el-col>
                    </el-row>
                  </div>
                  <div v-if="check.attachment['_1']" class="attachment-row">
                    <div class="row-title">
                      <span class="label">不符合要求：</span>
                    </div>
                    <el-row class="row-content" type="flex" :gutter="10">
                      <el-col v-for="(attachment, index2) in check.attachment['_1']" :key="index2" class="content-item">
                        <template v-if="imageTypes.includes(attachment.type)">
                          <el-image class="item-image" fit="contain" :src="getFileRequestUrl(attachment.fileId)" :preview-src-list="[getFileRequestUrl(attachment.fileId)]" />
                          <span>{{ attachment.remark }}</span>
                        </template>
                        <template v-if="videoTypes.includes(attachment.type)">
                          <div class="video-wrapper" @click="playVideo(attachment)">
                            <i class="video-icon el-icon-video-camera" />
                          </div>
                        </template>
                      </el-col>
                    </el-row>
                  </div>
                  <extension-form-result :fields="check.formResult.field" :results="check.formResult.result" :file-list="check.attachment" />
                  <div v-for="(review, rindex) in check.results" :key="'review' + rindex" class="check-item" style="margin-left: 40px;">
                    <el-card class="check-condition">
                      <div slot="header" class="header">
                        <span class="check-title">复核情况</span>
                        <span><span class="label">复核人员：</span>{{ review.checkUserName }}</span>
                        <span><span class="label">复核时间：</span>{{ review.checkDate }}</span>
                        <span><span class="label">即改即验：</span><el-checkbox v-model="review.isCurrCorrected" disabled :true-label="1" :false-label="0" /></span>
                        <span :class="{'primary': review.checkResult === 20, 'danger': review.checkResult === 21}"><span class="label">复核状态：</span>{{ review.checkResult | checkResult }}</span>
                      </div>
                      <el-row class="check-row" type="flex" align="middle">
                        <el-col v-if="review.checkResult === 11 || review.checkResult === 21" :span="6">
                          <div class="quality"><span>问题性质：</span><span>{{ review.problemProperty }}</span></div>
                        </el-col>

                        <el-col :span="18">
                          <span>复核描述：</span>
                          <span>{{ review.problemDesc }}</span>
                        </el-col>
                      </el-row>
                      <div v-if="review.attachment['_0']" class="attachment-row">
                        <div class="row-title">
                          <span class="label">符合要求：</span>
                        </div>
                        <el-row class="row-content" type="flex" :gutter="10">
                          <el-col v-for="(attachment, index2) in review.attachment['_0']" :key="index2" class="content-item">
                            <template v-if="imageTypes.includes(attachment.type)">
                              <el-image class="item-image" fit="contain" :src="getFileRequestUrl(attachment.fileId)" :preview-src-list="[getFileRequestUrl(attachment.fileId)]" />
                              <span>{{ attachment.remark }}</span>
                            </template>
                            <template v-if="videoTypes.includes(attachment.type)">
                              <div class="video-wrapper" @click="playVideo(attachment)">
                                <i class="video-icon el-icon-video-camera" />
                              </div>
                            </template>
                          </el-col>
                        </el-row>
                      </div>
                      <div v-if="review.attachment['_1']" class="attachment-row">
                        <div class="row-title">
                          <span class="label">不符合要求：</span>
                        </div>
                        <el-row class="row-content" type="flex" :gutter="10">
                          <el-col v-for="(attachment, index2) in review.attachment['_1']" :key="index2" class="content-item">
                            <template v-if="imageTypes.includes(attachment.type)">
                              <el-image class="item-image" fit="contain" :src="getFileRequestUrl(attachment.fileId)" :preview-src-list="[getFileRequestUrl(attachment.fileId)]" />
                              <span>{{ attachment.remark }}</span>
                            </template>
                            <template v-if="videoTypes.includes(attachment.type)">
                              <div class="video-wrapper" @click="playVideo(attachment)">
                                <i class="video-icon el-icon-video-camera" />
                              </div>
                            </template>
                          </el-col>
                        </el-row>
                      </div>
                      <extension-form-result :fields="review.formResult.field" :results="review.formResult.result" :file-list="review.attachment" />
                    </el-card>
                  </div>
                </el-card>
              </div>
              <el-empty v-if="scope.row.results.length === 0" description="暂无验收数据..." />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="验收状态" align="center" prop="cfplanstate" min-width="50">
          <template slot-scope="scope">
            <span :class="{'primary': scope.row.checkResult === 10, 'danger': scope.row.checkResult === 11}">{{ scope.row.checkResult | checkResult }}</span>
          </template>
        </el-table-column>
        <el-table-column label="检查位置" align="center" min-width="120" prop="site" />
        <el-table-column label="关键工序" align="center" min-width="120" prop="checkTableName" />
        <el-table-column label="验收人员" align="center" min-width="60" prop="checkUserName" />
        <el-table-column label="检查角色" align="center" min-width="80" prop="roleName" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getFileURL } from '@/api/common'
import { getInspectionRecord } from '@/api/statement/statement'
import ExtensionFormResult from './components/ExtensionFormResult'
import DialogVideoPlayer from './components/DialogVideoPlayer'
export default {
  name: 'CheckList',
  directives: {
    print
  },
  components: {
    ExtensionFormResult,
    DialogVideoPlayer
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        buildingId: '',
        checkTableId: '',
        objectId: '',
        inspectId: ''
      },
      print: 0,
      printObj: { check: {}},
      loadingImg: false,
      printConfig: {
        id: 'print',
        popTitle: '查看整改通知单-工程协同管理'
      },
      inspections: [],
      imageTypes: ['png', 'jpg', 'jpeg'],
      videoTypes: ['mp4']
    }
  },
  watch: {
    '$route.query'(val) {
      let isChange = false
      if (val.objectId !== undefined && val.objectId !== this.queryParams.objectId) {
        this.queryParams.buildingId = val.buildingId
        this.queryParams.checkTableId = val.checktableId
        this.queryParams.objectId = val.objectId
        this.queryParams.batch = this.$route.query.batch
        if (val.print !== undefined) {
          this.print = val.print
        }
        isChange = true
      }
      if (val.inspectId !== undefined && val.inspectId !== this.queryParams.inspectId) {
        this.queryParams.inspectId = val.inspectId
        isChange = true
      }
      if (isChange) this.getRecordList()
    }
  },
  created() {
    this.queryParams.buildingId = this.$route.query.buildingId
    this.queryParams.checkTableId = this.$route.query.checktableId
    this.queryParams.objectId = this.$route.query.objectId
    this.queryParams.inspectId = this.$route.query.inspectId
    this.queryParams.batch = this.$route.query.batch
    // if (process.env.NODE_ENV === 'development') { // 测试使用
    //   this.queryParams.buildingId = '+AEwNMbFTrqP0F7YR0cudhWcbo8='
    //   this.queryParams.checkTableId = 'x9oAAAB/ripC0JIj'
    //   this.queryParams.objectId = 'fHg/M1s9SRec73Un9m4EppA+AjY='
    // }
    this.getRecordList()
    this.$eventBus.$on('checkTableChange', (checkTable) => {
      this.queryParams.checkTableId = checkTable.checkTableId
      this.getRecordList()
    })
  },
  beforeDestroy() {
    // 关闭监听事件
    this.$eventBus.$off('checkTableChange')
  },
  methods: {
    printPreview(row, check) {
      this.loadingImg = true
      this.printObj = { ...row, check: check }
      document.getElementById('print').style.zoom = 0.7
      setTimeout(() => {
        this.loadingImg = false
        document.getElementById('clickId').click()
      }, 3000)
    },
    /** 查询工作日志列表 */
    getRecordList() {
      this.loading = true
      getInspectionRecord(this.queryParams).then(response => {
        this.inspections = response.data
        this.loading = false
      }
      )
    },
    getImgUrls(arr) {
      return arr.map(fileId => getFileURL(fileId))
    },
    getImgDes(arr, url) { // 获取图片描述
      const fileId = parseInt(url.split('/file/download?fileKey=')[1])
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].fileId === fileId) {
          return arr[i].remark
        }
      }
    },
    /**
     * 获取文件请求链接
     * @param fileId
     */
    getFileRequestUrl(fileId) {
      return getFileURL(fileId)
    },
    /**
     * 播放视频
     * @param video
     */
    playVideo(video) {
      const url = process.env.VUE_APP_BASE_API + '/file/download?fileKey=' + video.fileId
      console.log(video)
      // this.$refs.videoPlayer.play('http://172.22.203.142:8088/prod-api/file/download?fileKey=4642823')
      this.$refs.videoPlayer.play(url)
    }
  }
}
</script>
<style scoped lang="scss">
.image-size {
  width: 100px;
  height: 100px;
}
.inspection-form {
  margin-bottom: 10px;
  .inspection-item {
    font-size: 14px;
    .inspection-item-label {
      word-spacing: 10px;
      color: #99A9BF;
    }
    .inspection-item-value {
      color: #606266;
    }
  }
}
.check-condition {
  .el-card__header {
    background-color: #f8f8f9;
  }
}
  .label {
    color: #99a9bf;
  }
  .primary {
    color: #409EFF;
  }
  .danger {
    color: #F56C6C;
  }
 .process-check {
   .check-item {
     margin-top: 20px;
     .standard {
       margin-top: 10px;
     }
   }
   .check-item:nth-child(1) {
     margin-top: 0;
   }
   .check-condition {
     color: #606266;
     .header {
       display: flex;
       justify-content: space-between;
     }
     .check-title {
       font-weight: bold;
     }
     .check-row {
       min-height: 30px;
       border-bottom: 1px solid #e6ebf5;
       span:nth-child(1) {
         white-space: nowrap;
         color: #99a9bf;
       }
       .img-des {
         color: #909399;
         display: flex;
         flex-direction: column;
         align-items: center;
         margin:0 10px 10px 0;
         background-color: #F2F6FC;
         padding: 10px;
       }
       .unqualified {
         display: flex;
         span:nth-child(1) {
           white-space: nowrap;
           margin-right: 20px;
         }
       }
       .qualified {
         display: flex;
         span:nth-child(1) {
           white-space: nowrap;
           margin-right: 20px;
         }
       }
       .deadline {
         color: #F56C6C;
         display: inline-block;
       }
       .quality {
         display: inline-block;
       }
     }
   }
 }
 .attachment-row {
   display: flex;
   align-items: center;
   width: 100%;
   border-bottom: 1px solid #e6ebf5;
   .row-title {
     width: 10%;
   }
   .row-content {
     width: 90%;
     flex-wrap: wrap;
     justify-content: flex-start;
     .content-item {
       display: flex;
       background-color: #F2F6FC;
       margin: 10px;
       width: 100px;
       height: 100px;
       .video-wrapper {
         cursor: pointer;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         .video-icon {
           font-size: 46px;
         }
       }
       .item-image {
         width: 100%;
         height: 100%;
       }
     }
   }
 }
</style>
